import {fetchSearchAddress} from '@/api/amap/address';
import Icon from '@/components/Icon';
import List from '@/components/List/List';
import NoData from '@/components/NoData/NoData';
import {useLocationStore} from '@/store/locationStore/locationStore';

import {useFocusEffect, useNavigation} from '@react-navigation/native';
import {FlatList, Input, Spinner, Text, View} from 'native-base';
import {useCallback, useState} from 'react';
import {Pressable} from 'react-native';

export default function () {
  // const {locationPos, setLocationPos} = useLocationStore();
  const {addressName, regionName, setAddressName} = useLocationStore();
  const [pois, setPois] = useState([]);
  const [loading, setLoading] = useState(false);
  const [searchName, setSearchName] = useState('');
  const [isScorll, setIsScorll] = useState(false);
  const navigation = useNavigation();
  const selectAddress = useCallback((item: any) => {
    setAddressName(item.name);
    navigation.navigate('home');
  }, []);
  useFocusEffect(
    useCallback(() => {
      (async () => {
        // setSearchName(addressName);
        if (searchName) {
          setLoading(true);
          const {data} = (await fetchSearchAddress(
            searchName,
            regionName,
          )) as any;
          setLoading(false);
          // console.log(data);
          if (data.pois && data.pois.length > 0) {
            setIsScorll(true);
          }
          setPois(data.pois);
        }
      })();

      // setAddressName('ddddd');
    }, [searchName, addressName]),
  );
  return (
    <View>
      <View
        px={'10'}
        py={'4'}
        borderBottomColor={'gray.300'}
        borderBottomWidth={'0.5'}>
        <Input
          autoFocus={true}
          rounded={'2xl'}
          value={searchName}
          onChangeText={text => setSearchName(text)}
          placeholder="请输入附近地址，以准确定位"
          leftElement={<Icon pl={'2'} iconName={'\ue645'}></Icon>}
        />
      </View>
      <List
        loading={loading}
        data={pois}
        scrollEnabled={isScorll}
        ListEmptyComponent={<NoData />}
        renderItem={({item}: any) => {
          return (
            <View
              px={'3'}
              py={'3'}
              borderBottomColor={'coolGray.400'}
              borderBottomWidth={'0.5'}
              borderBottomStyle={'solid'}>
              <Pressable
                onPress={() => {
                  selectAddress(item);
                }}>
                <Text fontWeight={'bold'} mb={'2'}>
                  {item.name}
                </Text>
                <Text pb={'2'} isTruncated>
                  {item.cityname + item.address}
                </Text>
              </Pressable>
            </View>
          );
        }}
      />
    </View>
  );
}
